@import 'variables';

match-notice {
  .competition-notice-list {
    .notice-item {
      margin-bottom: pxTorem(20);
      padding: pxTorem(40) pxTorem(24) pxTorem(30) pxTorem(24);
      background-color: color($h5, c10);
    }
    .header {
      div {
        margin-bottom: pxTorem(16);
      }
      .notice-title {
        text-align: justify;
        font-weight: bold;
        font-size: standard($f, f15);
        color: color($h5, c2);
      }
      .top-mark {
        display: inline-block;
        float: left;
        margin-right: pxTorem(20);
        padding: 0 pxTorem(10);
        line-height: pxTorem(35);
        font-size: standard($f, f6);
        border-radius: pxTorem(5);
        border: 1px solid color($h5, c11);
        color: color($h5, c11);
      }
      time {
        display: inline-block;
        font-size: standard($f, f6);
        color: color($h5, c4);
      }
    }
    .content {
      &.block {
        article {
          display: block;
        }
        .toogle {
          &::after {
            transform: rotate(180deg);
          }
        }
      }
      article {
        display: none;
        margin-top: pxTorem(26);
        text-align: justify;
        img {
          // margin: pxTorem(30) 0;
        }
      }
      .toogle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: pxTorem(16);
        text-align: right;
        font-size: standard($f, f4);
        color: color($h5, c1);
        &::after {
          content: '';
          margin-left: pxTorem(10);
          @include icon(17, 9, '#{$icons-path}/down_arrow.png');
        }
      }
    }
  }
}
